<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/base.js"></script>

</head>
<body>
<img id="faceImage" height="100px" width="100px" style="border-style: solid;border-color: #000000;border-width: 1px"/>
<br>
<input id="face" type="file" />
<br>
<button onclick="onSubmitClick();">识别人脸信息</button>
<script>
    let inputFace=document.getElementById("face");
    inputFace.onchange=function(){
        handleFile(inputFace.files);
    };

    function handleFile(files) {
        if (files.length > 1) {
            // 最多只能选四张，当前选中的和已显示之和不能大于4
            alert('最多1张');
            return;
        }
        if (files[0]) {
            // 将文件生成url
            let srcValue = window.URL.createObjectURL(files[0]);
            document.getElementById("faceImage").src=srcValue;
            readAsDataURL();
        }
    }

    function onSubmitClick() {
        let url="http://localhost:9003/kx/face/search";
        let requestJSON={};
        //requestJSON.userId=document.getElementById("userId").value;
        requestJSON.face=base64;
        $.rest("POST",url,requestJSON,function(data){
            if(data.code==200){
                alert(data.result.userId);
            }else{
                alert("识别失败");
            }
        });
        return false;
    }


    let base64;
    function readAsDataURL()
    {
        if(typeof FileReader=='undifined')          //判断浏览器是否支持filereader
        {
            result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
            return false;
        }
        let file=document.getElementById("face").files[0];
        if(!/image\/\w+/.test(file.type))           //判断获取的是否为图片文件
        {
            alert("请确保文件为图像文件");
            return false;
        }
        let reader=new FileReader();
        reader.readAsDataURL(file);
        reader.onload=function(e)
        {
            // var result=document.getElementById("result");
            // result.innerHTML='<img src="'+this.result+'" alt=""/>'
            base64=this.result;
            base64= base64.substring(base64.indexOf(",")+1);
        }
    }

</script>
</body>
</html>